<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 弹性布局 -->
    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
            /* flex 是 flexible box 的缩写. 意思为 "弹性盒子". 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局 */
            /* flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式. */
            /* 1、被设置为 display:flex 属性的元素, 称为 flex container */
            /* 2、它的所有子元素立刻称为了该容器的成员, 称为 flex item */
            /* 3、flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴) */
            /* 注意：当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效. */
            display: flex; /* 使得它的子元素不再是行内元素，使其有了宽度和高度 */

            /* justify-content 设置主轴上的子元素排列方式 使用之前一定要确定好主轴是哪个方向 */
            /* flex-start 默认值，项目位于容器的开头 */
            /* flex-end 项目位于容器的末尾 */
            /* center 项目位于容器的中央 */
            /* space-between 项目于在行与行之间留有间隔 */
            /* space-around 项目在行之前、之间、之后留有间隔 */
            justify-content: space-around; /* 使它的子元素水平均匀隔开*/
            /* justify-content: flex-end; 使它的子元素右对其 */



            /* align-items 设置侧轴上的元素排列方式 */
            /* stretch 默认值，行拉伸以占据剩余空间，这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度 */
            /* center 朝着弹性容器的中央对行打包 */
            /* flex-start 朝着弹性容器的开头对行打包 */
            /* flex-end 朝着弹性容器的结尾对行打包 */
            /* space-between 行均匀分布在弹性容器中 */
            /* space-around 行均匀分布在弹性容器中，两端各占一般 */
            /* 注意：align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents */
            align-items: center;
        }

        div>span {
            /*行内元素不可以设置高度和宽度，没有效果，除非变成行内块级元素, 使用 display: flex; 但是必须给它的父类设置 */
            width: 100px; 
            background-color: green;
        }
    </style>

</head>

<body>
    <div>
        <span>one</span>
        <span>two</span>
        <span>three</span>
    </div>
</body>

</html>